<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button type="primary" icon="el-icon-search" @click="TableSearch">搜 索</el-button>
                <el-button @click="Reset" icon="el-icon-delete">重 置</el-button>
            </div>
            <div class="tb-body">
                <el-form ref="searchFormRef" :model="searchForm" :inline="true" label-width="120px" :style="`flex:1;`">

                    <el-form-item label="班级">
                        <el-paged-select url="/Organization/List" columnName="Name" columnValue="Id"
                            v-model="searchForm.OrganizationId">
                        </el-paged-select>
                    </el-form-item>
                    <el-form-item label="用户">
                        <el-paged-select url="/User/List" columnName="Name" columnValue="Id" v-model="searchForm.UserId"
                            :where="{ RoleType: 1 }">
                        </el-paged-select>
                    </el-form-item>
                    <el-form-item label="申请原因" prop="Reason">
                        <el-input v-model.trim="searchForm.Reason" placeholder="请输入申请原因"></el-input>
                    </el-form-item>
                    <el-form-item label="回复内容" prop="Reply">
                        <el-input v-model.trim="searchForm.Reply" placeholder="请输入回复内容"></el-input>
                    </el-form-item>
                    <el-form-item label="审核人">
                        <el-paged-select url="/User/List" columnName="Name" columnValue="Id"
                            v-model="searchForm.AuditUserId" :where="{ RoleType: 2 }">
                        </el-paged-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-paged-select url="/Select/AuditStatus" columnName="Name" columnValue="Value"
                            v-model="searchForm.AuditStatus">
                        </el-paged-select>
                    </el-form-item>

                </el-form>
            </div>

        </el-card>


        <el-dialog title="补卡记录编辑对话框" :visible.sync="editorShow" width="80%" :lock-scroll="true" height="800px">
            <el-form v-if="editorShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
                label-width="140px" size="mini">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="补卡开始时间" prop="BeginTime">
                            <el-date-picker v-model="formData.BeginTime" :disabled="true" align="right" type="datetime"
                                placeholder="选择补卡开始时间时间" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="补卡结束时间" prop="EndTime">
                            <el-date-picker v-model="formData.EndTime" :disabled="true" align="right" type="datetime"
                                placeholder="选择补卡结束时间时间" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="班级" prop="OrganizationId">
                            <el-paged-select url="/Organization/List" :disabled="true" columnName="Name" columnValue="Id"
                                v-model="formData.OrganizationId">
                            </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户" prop="UserId">
                            <el-paged-select url="/User/List" :disabled="true" columnName="Name" columnValue="Id"
                                v-model="formData.UserId">
                            </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="申请原因" prop="Reason">
                            <el-input v-model.trim="formData.Reason" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="回复内容" prop="Reply">
                            <el-input v-model.trim="formData.Reply"></el-input>
                        </el-form-item>
                    </el-col>


                </el-row>


                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" plain @click="CreateOrEditForm()">确 定</el-button>
                        <el-button @click="editorShow = false">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>

        </el-dialog>


        <data-table ref="tableId" url="/ReCheck/List" :column="dataColum">
            <template v-slot:header>
                <!-- <el-button type="primary" plain icon="el-icon-edit" @click="ShowEditModal()">新 增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="ShowBatchDeleteModal()">批 量 删 除</el-button> -->
            </template>
            <template v-slot:operate="scope">
                <el-button type="text" v-if="scope.row.AuditStatus == 0" @click="ApplySuccess(scope.row.Id)">批 准
                </el-button>
                <el-button type="text" v-if="scope.row.AuditStatus == 0" @click="ShowEditModal(scope.row.Id, 2)">拒 绝
                </el-button>
                <el-button type="text" v-if="scope.row.AuditStatus == 0" @click="ShowDeleteModal(scope.row.Id)">删
                    除</el-button>
            </template>
        </data-table>
    </div>
</template>

<script>
import store from '@/store';
import { mapGetters } from 'vuex'
export default {
    name: "ReCheckList",
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'userId', 'loginTimePeriod', "user", 'userId', 'roleType'
        ])
    },
    data() {

        return {
            lock: 0,//用来防止重复提交的变量
            searchForm: {},//搜索定义的数据对象
            dataColum: [
                {
                    key: "Id",
                    hidden: true,

                },
                {
                    key: "BeginTime",
                    title: "补卡开始时间",
                    type: store.getters.columnType.DATETIME,

                },
                {
                    key: "OrganizationId",
                    hidden: true,
                },
                {
                    key: "OrganizationDto.Name",
                    title: "班级",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "UserId",
                    hidden: true,
                },
                {
                    key: "AuditStatus",
                    hidden: true,
                },

                {
                    key: "UserDto.Name",
                    title: "用户",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Reason",
                    title: "申请原因",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Reply",
                    title: "回复内容",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "AuditUserId",
                    hidden: true,
                },
                {
                    key: "AuditUserDto.Name",
                    title: "审核人",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "AuditStatusFormat",
                    title: "审核状态",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "EndTime",
                    title: "补卡结束时间",
                    type: store.getters.columnType.DATETIME,

                },
                {
                    title: "操作",
                    width: "300px",
                    type: store.getters.columnType.USERDEFINED,
                },
            ],
            editModalFormRules: {
                "BeginTime": [
                ],

                "OrganizationId": [
                ],

                "UserId": [
                ],

                "Reason": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "Reply": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],

                "AuditUserId": [
                ],

                "AuditStatus": [
                ],

                "EndTime": [
                ],

            },
            formData: {

            },//保存或者修改定义的数据对象
            editorShow: false,//编辑弹窗定义的数据对象

        };
    },
    created() {

    },
    methods: {
        //补卡成功
        async ApplySuccess(Id) {
            await this.$PostSigleUpdate(`/ReCheck/Get`, `/ReCheck/ApplySuccess`, Id, "你确定审核通过吗?", { AuditUserId: this.userId })
            this.$refs.tableId.reload();
        },
        /**
         * 点击新增或者编辑的时候会触发
         */
        async ShowEditModal(Id, AuditStatus) {

            let { Data } = await this.$Post(`/ReCheck/Get`, { Id: Id });
            this.formData = Data;
            this.formData.Behavior = null;
            this.formData.IsEdit = Id != undefined;
            this.formData.AuditUserId = this.userId;
            this.formData.AuditStatus = AuditStatus;
            this.editorShow = true;

        },
        /**
         * 点击保存的时候会触发
         */
        async CreateOrEditForm() {
            if (this.lock == 1) return;
            this.$refs.editModalForm.validate(async valid => {
                if (valid) {
                    this.lock = 1;
                    var { Success } = await this.$PostLoading(`/ReCheck/CreateOrEdit`, this.formData);
                    this.lock = 0;
                    if (Success) {
                        this.editorShow = false;
                        this.$refs.tableId.reload();
                    }
                }
            })
        },
        /**
         * 单个删除的时候会触发
         */
        async ShowDeleteModal(Id) {
            await this.$PostDelete(`/ReCheck/Delete`, { Id: Id });
            this.$refs.tableId.reload();
        },
        /**
         * 批量删除的时候会触发
         */
        async ShowBatchDeleteModal() {
            var ids = this.$refs.tableId.GetSelectionRow().map(x => x.Id);
            await this.$PostDelete(`/ReCheck/BatchDelete`, { Ids: ids });
            this.$refs.tableId.reload();
        },
        /**
         * 点击表格搜索按钮会触发
         */
        async TableSearch() {
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 点击清空表单会触发
         */
        async Reset() {
            this.searchForm = {};
            this.$refs.tableId.reload(this.searchForm);
        },




    },
};
</script>
